<template>
  <div :device="device" :sub="sub" class="dev-container">
    <div class="dev-header">
      <div class="dev-icon-wrapper card-icon">
        <svg-icon icon-class="control" class-name="dev-icon" />
      </div>
      <div class="dev-info">
        <div class="dev-info-name"> {{ device.name }} </div>
        <div class="dev-info-position"> {{ device.position }} </div>
        <div v-if="device.online === 1" class="dev-online"> 在线 </div>
        <div v-else class="dev-offline"> 离线 </div>
      </div>
      <div style="float:right;margin:10px;">
        <el-button type="success" size="large" @click="onGetPin(device)"> 获取状态 </el-button>
        <el-button type="success" size="large" @click="saveSet"> 保存设置 </el-button>
      </div>
    </div>

    <div class="grid">

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>环境条件</span>
        </div>
        <el-form ref="form" label-width="150px" label-position="left">
          <el-form-item label="获取方式">
            <el-select v-model="device.value.auto" style="width:100px;" placeholder="请选择">
              <el-option
                v-for="item in AutoOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="湿度(RH)">
            <el-input-number v-if="device.value.auto===true" v-model="device.value.humidity" disabled controls-position="right" :step="0.1" :precision="1" :min="-99999999" :max="99999999" />
            <el-input-number v-if="device.value.auto===false" v-model="device.value.humidity" controls-position="right" :step="0.1" :precision="1" :min="-99999999" :max="99999999" />
          </el-form-item>
          <el-form-item label="温度(℃)">
            <el-input-number v-if="device.value.auto===true" v-model="device.value.temperature" disabled controls-position="right" :step="0.1" :precision="1" :min="-99999999" :max="99999999" @change="getResult" />
            <el-input-number v-if="device.value.auto===false" v-model="device.value.temperature" controls-position="right" :step="0.1" :precision="1" :min="-99999999" :max="99999999" @change="getResult" />
          </el-form-item>
          <el-form-item label="气压(kPa)">
            <el-input-number v-if="device.value.auto===true" v-model="device.value.press" disabled controls-position="right" :step="0.1" :precision="3" :min="-99999999" :max="99999999" @change="getResult" />
            <el-input-number v-if="device.value.auto===false" v-model="device.value.press" controls-position="right" :step="0.1" :precision="3" :min="-99999999" :max="99999999" @change="getResult" />
          </el-form-item>
          <el-form-item label="温度气压修正-Ktp">
            <el-input-number v-model="device.value.ktp" controls-position="right" :step="0.1" :precision="4" :min="-99999999" :max="99999999" disabled @change="getResult" />
            <el-button type="success" size="large" style="margin-left:10px" @click="getResult()"> 计算 </el-button>
          </el-form-item>
          <el-form-item label="剂量仪示值">
            <el-input-number v-model="device.value.measure_value" controls-position="right" :step="0.1" :precision="4" :min="-99999999" :max="99999999" @change="getResult" />
          </el-form-item>
          <el-form-item label="修正因子">
            <el-input-number v-model="device.value.measure_factor" controls-position="right" :step="0.1" :precision="4" :min="-99999999" :max="99999999" @change="getResult" />
          </el-form-item>
          <el-form-item label="计算结果">
            <el-input-number v-model="device.value.measure_result" controls-position="right" :step="0.1" :precision="4" :min="-99999999" :max="99999999" disabled @change="getResult" />
            <el-button type="success" size="large" style="margin-left:10px" @click="getResult"> 计算 </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>状态指示</span>
        </div>
        <div class="grid">
          <el-form ref="form" label-width="100px" label-position="left">
            <el-form-item v-if="device.value.infrared.enable===1" :label="device.value.infrared.name">
              <div v-if="device.value.infrared.value===0" class="success"> 无人 </div>
              <div v-else-if="device.value.infrared.value===1" class="danger">有人</div>
              <div v-else class="danger">异常</div>
            </el-form-item>
            <el-form-item v-if="device.value.door.enable" :label="device.value.door.name">
              <div v-if="device.value.door.value===0" class="success">关闭</div>
              <div v-else-if="device.value.door.value===1" class="danger">开启</div>
              <div v-else class="danger">异常</div>
            </el-form-item>
            <el-form-item v-if="device.value.relay0.enable===1" :label="device.value.relay0.name">
              <div v-if="device.value.relay0.value===0" class="success">关闭</div>
              <div v-else-if="device.value.relay0.value===1" class="danger">开启</div>
              <div v-else class="danger">异常</div>
            </el-form-item>
            <el-form-item v-if="device.value.relay1.enable===1" :label="device.value.relay1.name">
              <div v-if="device.value.relay1.value===0" class="success">关闭</div>
              <div v-else-if="device.value.relay1.value===1" class="danger">开启</div>
              <div v-else class="danger">异常</div>
            </el-form-item>
          </el-form>
          <el-form ref="form" label-width="100px" label-position="left">
            <el-form-item v-if="device.value.key0.enable===1" :label="device.value.key0.name">
              <div v-if="device.value.key0.value===0" class="success">闭合</div>
              <div v-else-if="device.value.key0.value===1" class="danger">断开</div>
              <div v-else class="danger">异常</div>
            </el-form-item>
            <el-form-item v-if="device.value.key1.enable===1" :label="device.value.key1.name">
              <div v-if="device.value.key1.value===0" class="success">闭合</div>
              <div v-else-if="device.value.key1.value===1" class="danger">断开</div>
              <div v-else class="danger">异常</div>
            </el-form-item>
            <el-form-item v-if="device.value.key2.enable===1" :label="device.value.key2.name">
              <div v-if="device.value.key2.value===0" class="success">闭合</div>
              <div v-else-if="device.value.key2.value===1" class="danger">断开</div>
              <div v-else class="danger">异常</div>
            </el-form-item>
            <el-form-item v-if="device.value.key3.enable===1" :label="device.value.key3.name">
              <div v-if="device.value.key3.value===0" class="success">闭合</div>
              <div v-else-if="device.value.key3.value===1" class="danger">断开</div>
              <div v-else class="danger">异常</div>
            </el-form-item>
          </el-form>
        </div>

        <el-form ref="form" label-width="100px" label-position="left">
          <el-form-item label="出源指示">
            <svg-icon v-if="device.value.chain===0" icon-class="chain-error" class="icon-chain" />
            <svg-icon v-if="device.value.chain===1" icon-class="chain-ok" class="icon-chain" />
            <!-- <div v-if="device.value.chain===1" style="color: rgba(0, 187, 0, 0.45);font-size:50px;">允许出源</div>
            <div v-else style="color: rgba(255, 0, 0, 0.45);font-size:50px;">禁止出源</div> -->
          </el-form-item>
        </el-form>

      </el-card>
    </div>

    <el-dialog title="选择条件" :visible.sync="dialogKtpVisible">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogKtpVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogKtpVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { CMD_CONTROL } from '@/utils/cmd'
import { editDevice } from '@/api/device'

export default {
  name: 'Control',
  components: { },
  filters: {
    typeFilter(status) {
      if (status === -1) {
        return 'danger'
      } else if (status === 0) {
        return 'success'
      } else if (status === 1) {
        return 'danger'
      }
    },
    statusFilter(status, values) {
      for (var i = 0; i < values.length; i++) {
        if (status === values[i].value) {
          return values[i].name
        }
      }
    }
  },
  props: {
    id: {
      type: Number,
      default: 0
    },
    device: {
      type: Object,
      default: null
    },
    value: {
      type: Object,
      default: null
    },
    name: {
      type: String,
      default: null
    },
    sub: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dialogKtpVisible: false,
      AutoOptions: [{ label: '自动', value: true }, { label: '手动', value: false }],
      press: 0,
      temperature: 0
    }
  },
  watch: {
    device: {
      deep: true,
      handler(val) {
        this.setDevice(val)
        this.getResult()
      }
    }
  },
  created() {
    console.log('连锁控制器设备信息如下......')
    console.log(this.device)
  },
  methods: {
    setDevice(val) {
      this.device = val
    },
    saveSet() {
      editDevice(this.device).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
        } else this.$message(response.message)
      })
    },
    // 跳转到设置界面
    toSet(device) {
      console.log('编辑运动轴设备...')
      this.$router.push({ path: '/device/control/set', query: device })
    },
    getResult() {
      try {
        // 计算温度气压修正
        var t = this.device.value.temperature
        var P = this.device.value.press
        var ktp = ((273.15 + t) / 293.15) * (101.3 / P)
        this.device.value.ktp = ktp.toFixed(4)

        // 计算结果
        var value = this.device.value.measure_value
        var factor = this.device.value.measure_factor
        this.device.value.measure_result = ktp * value * factor
        this.$message({ duration: 500, type: 'success', message: '计算成功!' })
      } catch (error) {
        this.$message({ type: 'error', message: error })
      }
    },
    getMeasure() {
      try {
        // var ktp = this.device.value.ktp
        // var value = this.device.value.measure_value
        // var factor = this.device.value.measure_factor
        // this.device.value.measure_result = ktp * value * factor
        // this.$message({ duration: 500, type: 'success', message: '计算结果-计算成功!' })
      } catch (error) {
        this.$message({ type: 'error', message: error })
      }
    },
    onGetPin(item) {
      // item.value.switch.value = 0
      // item.value.infrared.value = 0
      // item.value.door.value = 0
      this.publish(item.sub, JSON.stringify({
        code: CMD_CONTROL.get_pin.toString(),
        msg: '0'
      }))
    },
    subscribe(val) {
      console.log('订阅主题')
      console.log(val)
      this.$mqtt.subscribe(val)
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    }
  }
}
</script>

<style lang="scss" scoped>

.offline {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.name {
  width: 80px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.45);
  font-size: 20px;
}

.icon-chain {
  color: rgba(0, 187, 0, 0.45);
  font-size: 150px;
}

.icon-success {
  color: rgba(0, 187, 0, 0.45);
  font-size: 48px;
}

.icon-danger {
  color: rgba(255, 0, 0, 0.45);
  font-size: 48px;
}

.success {
  color: rgba(0, 187, 0, 0.45);
  font-weight: bold;
  font-size: 25px;
}

.danger {
  color: rgba(255, 0, 0, 0.45);
  font-weight: bold;
  font-size: 25px;
}

.dev-container {
  margin: 10px;
  background: #fff;
  width: 100%;
  transition: 0.3s;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 10px;
  &:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
}

.dev-header {
    background:#fff;
    height: 110px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #666;
    border-color: rgba(0, 0, 0, .55);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom:1px solid #ccc;
    // &:hover {
    //   .dev-icon-wrapper {
    //     color: #fff;
    //   }

    //   .card-icon{
    //     background: #40c9c6;
    //   }
    // }
    .dev-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
      color: #40c9c6;
    }

    .dev-icon {
      float: left;
      font-size: 48px;
    }

    .dev-info {
      float: left;
      font-weight: bold;
      margin: 26px;
      .dev-info-name {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
        margin-bottom: 12px;
      }
      .dev-info-position {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .dev-online {
        line-height: 18px;
        color: rgba(0, 255, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .dev-offline {
        line-height: 18px;
        color: rgba(255, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
    }
  }

.row {
  width: 100%;
  display:flex;
  display:-webkit-flex;/*Safari*/
  justify-content:space-around;/*水平排布方式*/
  align-items:center;/*垂直对齐方式*/
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.box-card{
  margin: 0px;
}

</style>
